<template>
  <div ref="goodsList">
      <waterfall :col="2" :data="spuList" :loadDistance="10" @loadmore="loadmore">
          <template>
              <div class="goodsList" v-for="(item,index) in spuList" :key="index">
                  <router-link :to="{name:'goods',params:{id:item.id}}">
                      <img :src="item.img">
                      <p class="goodsList-title">{{item.title}}</p>
                      <div class="goodsList-tags-out">
                          <van-tag v-for="(item2,index) in item.tags" :key="index" type="primary" class="goodsList-tags">
                              {{item2}}
                          </van-tag>
                      </div>
                      <p class="goodsList-price">￥{{item.price}}</p>
                      <p class="goodsList-subtitle">￥{{item.description}}</p>
                  </router-link>
              </div>
          </template>
      </waterfall>
      <span v-if="isShow" style="align-item:bottom;">加载中...</span>
        <span v-else style="align-item:center;">没有更多了</span>
  </div>
</template>

<script>
export default {
  props: {
  },
  components: {
  },
  data() {
    return {
        spuList:[],
        pageSize:5,
        pageStart:0,
        isShow:true
    };
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
      getSpuByPage(){
          this.$http.get("/api/spu/page",{
              params:{
                  count:this.pageSize,
                  start:this.pageStart
              }
          }).then(
              response=>{
                  console.log('4',response.data.list.length)
                  if(response.data.list.length!==0){
                    let currentPageResult=response.data.list
                    currentPageResult.forEach(element => {
                        if(element.tags && element.tags!==''){
                            element.tags=element.tags.split('$')
                        }
                    });
                  this.spuList.push(...currentPageResult)
                  this.isShow=true
                  }else{
                      this.isShow=false
                      this.$http.abort()
                  } 

              },
              error=>{
                  console.log(error)
              }
          )   
      },
      loadmore(index){
          if(this.pageSize==5){
              this.pageStart+=this.pageSize
              this.getSpuByPage()
          }
    }
  },
};
</script>
<style scoped lang="less">
    @media screen and (max-width:800px) {
        .goodsList{
            background: white;
            text-align: left;
            float: left;
            width: 170px;
            margin: 8px 8px;
            padding-bottom: 10px;
            box-shadow: 0 0 4px rgb(64, 44, 47);
            border-radius: 8px 8px 8px 8px;
            
        }
        .goodsList img {
                border-radius: 8px 8px 0 0;
                width: 100%;
                max-width: 100%;
                max-height: 100%;
            }
    }
    @media screen and (min-width:820px) {
        .goodsList{
            background: white;
            text-align: left;
            float: left;
            width: 96%;
            margin: 8px 8px;
            padding-bottom: 10px;
            box-shadow: 0 0 4px rgb(64, 44, 47);
            border-radius: 8px 8px 8px 8px;
            
        }
        .goodsList img{
                border-radius: 8px 8px 0 0;
                width: 100%;
                max-width: 100%;
                max-height: 100%;
            }
    }
    .goodsList-subtitle{
        word-wrap: break-word;
        padding: 5px 10px 0 11px;
        color:rgb(95, 126, 151);
        font-size: 12px;
    }
    .goodsList-background{
        height: 500px;
        background-color: rgb(169, 221, 187);
    }
    .goodsList-title{
        font-size: 15px;
        color: black;
        padding: 2px 10px 0 11px;
    }
    .goodsList-tags{
        background: rgb(201, 174, 115);
        font-size: 5px;
        padding-top: 2px;
        margin-top: 2px;
        margin-left: 4px;
        color: white;
        .goodsList-tags-out{
            margin-left: 6px;
        }
    }
    .goodsList-price{
        padding-top: 5px;
        color: rgb(62, 62, 131);
        padding-left: 10px;
    }
</style>